<template>
  <div class="w-full h-full min-h-0 ">
    <Scrollbar class="scrollbar" ref="scrollbar" safe-area>
      <ul class="flex flex-col overflow-auto">
        <li v-for="(item, index) in list" :key="index" :class="[
          'flex',
          'flex-row',
          'p-2',
          'items-center',
          'justify-between',
          'rounded',
          'gap-3',
          {
            'flex-row-reverse':
              item['from_name'] == self['from_name'],
          },
        ]">
          <div class="h-full w-12 cursor-pointer">
            <img v-if="
              item['from_id'] === self['to_id'] &&
              self['to_avatar']
            " class="rounded-full w-full h-12" :src="self['to_avatar']" :alt="item['to_id']" />
            <div v-else
              class="rounded-full w-full h-12 bg-[#fb923c] text-white text-[20px] flex items-center justify-center">
              {{ item['from_name'][0] }}
            </div>
          </div>
          <div :class="[
            'flex-1',
            'flex',
            'flex-row',
            'justify-between',
            'relative',
            'overflow-hidden',
            {
              'flex-row-reverse':
                item['from_name'] == self['from_name'],
            },
          ]">
            <div :class="[
              'w-full',
              'flex',
              'flex-col',
              'gap-1',
              'items-start',
              {
                'items-end':
                  item['from_name'] == self['from_name'],
              },
            ]">
              <span class="text-gray-600 text-[12px]">
                {{
                  item['msg_time']
                    ? item['msg_time'].slice(5)
                    : ''
                }}
              </span>
              <div :class="[
                'w-full',
                'h-full',
                'flex',
                'items-center',
                'gap-2',
                {
                  'flex-row-reverse':
                    item['from_name'] ==
                    self['from_name'],
                },
              ]">
                <span :class="[
                  'text-[13px]',
                  'p-3',
                  'max-w-[72%]',
                  'rounded-lg',
                  {
                    'rounded-tl-none':
                      item['from_name'] !=
                      self['from_name'],
                    'bg-[#ffffff]':
                      item['from_name'] !=
                      self['from_name'],
                    'rounded-tr-none':
                      item['from_name'] ==
                      self['from_name'],
                    'bg-[#95ec69]':
                      item['from_name'] ==
                      self['from_name'] &&
                      item['content'] !==
                      '【卡片消息】',
                  },
                ]" v-html="item['from_name'] == self['from_name']
                  ? cardToHtml(
                    textToEmoji(item['content'])
                  )
                  : textToEmoji(item['content'])
                  " />
                <span v-if="
                  item['from_name'] == self['from_name']
                " :class="[
                  {
                    'animate-spin': item['status'] == 1,
                    'text-green-500':
                      item['status'] == 1,
                    'text-green-600':
                      item['status'] == 2,
                    'text-red-500':
                      item['status'] == -1,
                  },
                ]">
                  <span v-if="item['status'] == 0" class="text-[12px] text-gray-500">
                    {{ item['status_desc'] }}
                  </span>
                  <LoadingIcon v-else-if="item['status'] == 1" />
                  <FailIcon v-else-if="item['status'] == -1" />
                  <SuccessIcon v-else />
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </Scrollbar>
  </div>
</template>

<script setup lang="ts">
import Scrollbar from '@/components/scrollbar/Scrollbar.vue';
import { type IProps } from './props'
import { textToEmoji, cardToHtml } from '@/utils/render';
import LoadingIcon from '@/components/icon/Loading.vue';
import FailIcon from '../icon/Fail.vue';
import SuccessIcon from '../icon/Success.vue';
import { onMounted, onUpdated, ref, watch } from 'vue';
import { nextTick } from 'vue';

// 接收父亲传的数组
const props = withDefaults(defineProps<IProps>(), {
  list: () => []
})

const scrollbar = ref<InstanceType<typeof Scrollbar>>()

// onMounted(() => {
//   nextTick(() => {
//     if (scrollbar.value) {
//       console.log('message页面得滚动条是存在的');
//       scrollbar.value!.scrollToBottom(false)
//       console.log(document.querySelector("ul")?.clientHeight)
//     } else {
//       console.error('scrollbar ref is not defined')
//     }
//   })
// })

defineExpose({
  scrollToBottom() {
    if (scrollbar.value) {
      console.log('message调用滚动条方法');
      console.log(document.querySelector('ul')?.clientHeight);
      scrollbar.value!.scrollToBottom(false)
    }
  }
})

</script>
